<template>
  <!-- 搜索按钮 -->
  <button @click="expand" type="button" aria-expanded="false"
    class="outline-none text-[#d2deee] transition-colors duration-300 hover:text-blue-600  rounded-lg text-sm p-2.5 mr-1">
    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
    </svg>
    <span class="sr-only cursor-pointer">Search</span>
  </button>
  <div class="flex flex-nowrap items-center w-0 max-w-[305px] overflow-hidden transition-all duration-[400ms]"
    :class="{ 'shrink': shrink }">
    <input v-model="searchValue" type="text"
      class="max-w-[300px] blog_input  transition-all w-full duration-300 text-sm text-white  bg-transparent "
      placeholder="搜索一下...">
    <svg t="1731629195937" @click="handleShrink" class="icon w-3 h-3 transition-colors text-[#fff] hover:text-[#2c3a75]"
      fill="currentColor" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5697">
      <path
        d="M916.336 917.44a15.952 15.952 0 0 1-11.312-4.688L96.368 104.08a15.984 15.984 0 1 1 22.624-22.624l808.656 808.672a15.984 15.984 0 0 1-11.312 27.312z"
        p-id="5698"></path>
      <path
        d="M107.68 917.44a15.984 15.984 0 0 1-11.312-27.312L905.024 81.456a15.984 15.984 0 1 1 22.624 22.624L118.992 912.752a15.92 15.92 0 0 1-11.312 4.688z"
        p-id="5699"></path>
    </svg>
  </div>



</template>

<script setup>
import { ref, defineExpose } from 'vue'

const shrink = ref(false)
const searchValue = ref('')
const handleShrink = () => {
  shrink.value = false
  setTimeout(() => {
    searchValue.value = ''
  }, 800)
}

// 对外暴露一个expand方法
const emit = defineEmits(['expand'])
const expand = () => {
  if (!shrink.value) {   //如果没有展开, 就展开
    shrink.value = true
    return
  }
  // 弹出搜索框
  emit('expand', searchValue.value)
}




</script>

<style scoped>
.shrink {
  width: 18vw;
}

.blog_input {
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 0;
  font-family: 'cute_Cat';
}

input::-webkit-input-placeholder {
  font-family: 'cute_Cat';
}
</style>